<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="stylesheet" href="css/main.css" type="text/css"/>
    <link rel="stylesheet" href="css/template1.css" type="text/css"/>
    <title>Demonstra&ccedil;&atilde;o | Wuenas</title>
    
    <!-- Dependencias -->
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <!--<script type="text/javascript" src="js/ui-acessivel.js"></script>-->
	<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.keyboard/jquery.keyboard.js"></script>
	<script type="text/javascript" src="js/jquery.timers-1.0.0.js"></script>
	
	
	<script type="text/javascript" src="js/slideshow.js"></script>		
	<!-- Implementacao -->
	<!--<script type="text/javascript" src="js/acessivel.js"></script>-->
	<script type="text/javascript" src="js/wuenas-keyboard.js"></script>
	<script type="text/javascript" src="js/wuenas-forms.js"></script>
	<script type="text/javascript" src="js/wuenas.js"></script>
	
</head>
<body>
	<div class="wu-component wu-toolbar">
		<div>
			<img src="images/favicon.png" alt="Wuenas's Logo"/>
			<span>Navegue entre os componentes utilizando as teclas <b>Tab</b>, <b>Enter</b> e <b>Backspace</b></span>
			<button class="wu-action">Cadastre-se</button>
	    	<button class="wu-action">Login</button>
	    </div>
	</div>
	<div id="wrap">
		<div id="header">
            <img src="images/logo.png" class="logo" alt="logo"/>
            <big>Wuenas</big>
        </div>
		<div id="main">
			<div class="wu-component">
            	Wuenas controls
            	<button class="wu-action" onclick="wuenas.autoScanner.start();">Start autoscan</button>
            	<button class="wu-action" onclick="wuenas.autoScanner.stop();">Stop autoscan</button>
            	<button class="wu-action" onclick="wuenas.back();">Backspace com Enter</button>
            </div>
			
			<div id="slideshow" class="wu-component wa-focus">
				<div class="panel"><a title="Sobre o Macaco 1" href="images/teste/macaco1.jpg"><img alt="Macaco 1" src="images/teste/macaco1.jpg"/></a></div>
				<div class="panel"><a title="Sobre o Macaco 2" href="images/teste/macaco1.jpg"><img alt="Macaco 2" src="images/teste/macaco2.jpg"/></a></div>
				<div class="panel"><a title="Sobre o Macaco 3" href="images/teste/macaco1.jpg"><img alt="Macaco 3" src="images/teste/macaco3.jpg"/></a></div>
				<div class="controls">
					<button class="previous wu-action">&lt;</button>
					<button class="follow wu-action">ir</button>
					<button class="next wu-action">&gt;</button>
				</div>
			</div>
			<ul id="menu1" class="wu-component" >
				<li><b>Experimente</b></li>
				<li class="wu-action">O Projeto</li>
				<li class="wu-action">Demonstra��o</li>
				<li class="wu-action">Desenvolvedor</li>
				<li class="wu-action">Sugest�es</li>
				<li class="wu-component">
					Componente
					<a href="#" class="wu-action">Action 1</a>
					<a href="#" class="wu-action">Action 2</a>
					<div class="wu-component">Comp1</div>
				</li>
			</ul>
			<form class="wu-component" style="clear:both">
				<label>Nome:</label><input class="wu-action" type="text" name="nome" /><br/>
				<label>Email:</label><input class="wu-action" type="text" name="email" /><br/>
				<label>Data de Nascimento:</label><input class="wu-action" type="text" name="datanasc" size="10"/><br/>
				<label>Estado Civil:</label>
				<select class="wu-action estado_civil">
					<option>Solteiro</option>
					<option>Casado</option>
					<option>Vi&uacute;vo</option>
					<option>Outro</option>
				</select><br/>
				<label class="estadocivil_especifique" style="display: none">Especifique:</label>
				<input class="wu-action estadocivil_especifique" style="display: none" type="text" name="datanasc" size="10"/>
			</form>			 
		</div>
		<div id="footer">Wuenas.org</div>
	</div>
	<div id="dialogs"></div>
</body>
<script type="text/javascript">
$("select.estado_civil").change(function(){
	if($(this).val() == "Outro"){
		$(".estadocivil_especifique").show();
	}else{
		$("input.estadocivil_especifique").val("");
		$(".estadocivil_especifique").hide();
	}
});
</script>
</html>